<template>
  <footer class="footer">
    <span class="todo-count"
      ><strong>{{ leftCount() }}</strong> item left</span
    >
    <ul class="filters">
      <li>
        <a
          :class="type === 'all' ? 'selected' : ''"
          href="#/"
          @click="selected('all')"
          >All</a
        >
      </li>
      <li>
        <a
          :class="type === 'active' ? 'selected' : ''"
          href="#/active"
          @click="selected('active')"
          >Active</a
        >
      </li>
      <li>
        <a
          :class="type === 'completed' ? 'selected' : ''"
          href="#/completed"
          @click="selected('completed')"
          >Completed</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="allDel">Clear completed</button>
  </footer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Todo } from "../App.vue";

interface Props {
  lists: Todo[];
  type: string;
}

const props = defineProps<Props>();

const emit = defineEmits(["selected", "allDel"]);

const selected = (t: string) => {
  emit("selected", t);
};

const allDel = () => {
  emit("allDel");
};

const leftCount = () => {
  let count: number = props.lists.length;

  if (props.type === "active") {
    count = props.lists.filter((item) => item.done).length;
  }
  if (props.type === "completed") {
    count = props.lists.filter((item) => !item.done).length;
  }
  return count;
};
</script>